[Day 08 - CSS Architecture] CSS設計模式，擺脫義大利麵代碼 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 8

Modern Web

Follow me! 來一場前端技能樹之旅系列第 8 篇

[Day 08 - CSS Architecture] CSS設計模式，擺脫義大利麵代碼

13th鐵人賽 modern web css architecture bem oocss

May

2021-09-21 13:45:00

1434 瀏覽

分享至

當別人說你的程式是義大利麵代碼 (Spaghetti code)，聽起來很好吃，應該是稱讚的意思吧！千萬不要誤會，那是在說你的程式碼雜亂無章、難以理解。

在前面的章節我們學到可以隨意命名 HTML 元素的 ID 和 Class 名稱，意味著沒有結構化的命名模式下，可能會因為重複命名，需要去解決 CSS 衝突的問題，就一直往下新增 CSS 代碼，導致程式亂亂的。所以本篇的教學重點就是：建立易讀易寫的CSS代碼規則 — OOCSS / BEM。

OOCSS

OOCSS (Object Oriented CSS)，主張用物件的形式管理 CSS 的分類規則，專注在讓組件的重複使用性提升，並且提出下面兩個主要的原則：

結構與樣式的分離

將重複的樣式抽離，獨立成一個組件重複使用。舉例來說如下面的程式碼，紅色的 box 和紅色的 button，那我們就可以把紅色的樣式抽離出來：

CSS

.box {
    width: 200px;
    height: 50px;
}
.button {
    width: 100px;
    height: 50px;
    padding: 10px;
}
.red-skin {
    background-color: red;
}

HTML

<div class="red-skin box"></div>
<button class="red-skin button"></div>

容器和內容的分離

將容器內部通用的結構分離。舉例來說如下面的程式碼，Header 雖然在 Section 跟 Footer 區塊都會出現，外觀一樣但安裝的位置不一樣，那我們就可以將 Header 像零件一樣抽離，再另外設定各自安裝的位置：

CSS

.global-header {
    font-size: 28px;
    width:500px;
    height:10px
}
.section-header {
    padding: 10px;
}
.footer-header {
    padding: 5px;
}

HTML

<section>
    <div class="section-header global-header">...</div>
</section>
<footer>
    <div class="footer-header global-header">...</div>
</footer>

BEM

BEM (Block, Element, Modifier)，主張劃分網頁區塊，以區塊 (Block)、元素 (Element) 和修飾子 (Modifier) 命名，用組件的模式去進行介面開發。

區塊 (Block)

指的是獨立的頁面元件

<header class="header">
    <div class="logo">...</div>
    <ul class="menu">
        <li>...</li>
        <li>...</li>
    </ul>
</header>

元素 (Element)

存在於 Block 中不可單獨存在的小元件，使用雙底線 __ 做分隔。

<header class="header">
    <div class="logo">
        <!-- logo中的元素 -->
        <img class="logo__img" />
        <h1 class="logo__title" />
    </div>
    <ul class="menu">
        <!-- menu中的item元素 -->
        <li class="menu__item">...</li>
        <li class="menu__item">...</li>
    </ul>
</header>

修飾子 (Modifier)

描述 Block 或 Element 的外觀，不能單獨使用，用單底線 _ 做分隔。

<header class="header">
    <div class="logo">...</div>
    <ul class="menu">
        <li class="menu__item">...</li>
        <!-- menu中的item--active元素 -->
        <li class="menu__item_active">...</li>
    </ul>
</header>

小結

OOCSS 強調的能提升組件的重複使用性、BEM 能讓命名結構更清楚，最主要的是能活用兩者的核心規則，建立易讀易寫的CSS，方便之後維護與管理。這個章節雖然只介紹了這兩種，但其實還有 SMACSS 的方式來管理 CSS，建議你都可以了解一下。那今天的介紹就到這，接下來我們會提到最後一個網頁核心技術 — Javascript，那我們就下章再見囉！

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️